<template>
  <div class="role-list">
    <div
      v-for="(item, index) in roleList"
      :key="item.roleId"
      class="role-item"
      :class="{ active: index === activeIndex }"
      @click="$emit('change-role', index)"
    >
      <div class="role-info">
        <svg-icon :icon-class="index === activeIndex ? 'user-active' : 'user'" class="icon" />
        {{ item.roleName }}
      </div>
      <div class="more">
        <el-dropdown>
          <span class="el-dropdown-link">
            <svg-icon icon-class="more" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push(`/roleAdd?id=${item.roleId}`)">
              编辑角色
            </el-dropdown-item>
            <el-dropdown-item @click.native="$emit('delete-role', item.roleId)">
              删除
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoleList',

  props: {
    roleList: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  }
}
</script>

  <style lang="scss" scoped>
  .role-item {
    position: relative;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    cursor: pointer;

    &.active {
      background: #edf5ff;
      color: #4770ff;
    }

    .role-info {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 10px;
      }
    }

    .more {
      display: flex;
      align-items: center;
    }
  }
  </style>
